How can I convince IE to honor my explicit instructions to make a table column X pixels wide? [migrated]

Posted by AnthonyWJones on Pro Webmasters See other posts from Pro Webmasters or by AnthonyWJones
Published on 2013-10-24T09:02:14Z Indexed on 2013/10/24 16:11 UTC
Read the original article Hit count: 283

Filed under:

html

|

internet-explorer

|

table

Please consider this small but complete chunk of HTML:

<!DOCTYPE html >
<html>
<head>
    <title>Test</title>
    <style type="text/css">
    span {overflow:hidden; white-space:nowrap;  }
    td {overflow:hidden; text-overflow:ellipsis}
    </style>
</head>
<body>
    <table cellspacing="0"  >
        <tbody>
            <tr>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 1</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 2</span></td>
               <td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 3</span></td> 
             </tr>
        </tbody>
    </table>
</body>
</html>

If you render the above in Chrome you'll see the effect I'm looking for.

However render it in IE8 or 9 the width and/or max-width is ignored.

So my question is how do get IE to simply let me specify the width of a cell explicitly?

BTW, I've tried various combinations of table-layout:fixed and using colgroup with cols and all sorts, nothing I've tried convinces IE to what I'm clearly asking it to explicitly do?

If I had any hair before starting this I wouldn't have any left by now.

Developer IT